import React from 'react';
import { Card, Button, Row, Col } from 'antd';

const BookDetail = () => {
  // 模拟图书数据
  const book = {
    cover: '/book_img/1.png',
    title: '示例图书',
    isbn: '978-7-121-30000-0',
    publisher: '示例出版社',
    pages: 300,
    stock: 5,
  };

  // 模拟相关推荐图书
  const relatedBooks = [
    { id: 1, cover: '/book_img/2.png', title: '相关推荐 1' },
    { id: 2, cover: '/book_img/3.png', title: '相关推荐 2' },
    { id: 3, cover: '/book_img/4.png', title: '相关推荐 3' },
  ];

  // 模拟书籍前一部分内容
  const bookExcerpt = `这是一本非常精彩的书籍，它讲述了一个关于冒险与成长的故事。在这个故事里，主人公踏上了一段充满挑战的旅程，他们需要克服各种困难和障碍，才能实现自己的目标。在这个过程中，他们结识了许多志同道合的朋友，一起并肩作战，共同成长。`;

  const handleBorrow = () => {
    // 这里可以添加借阅逻辑
    console.log('执行借阅操作');
  };

  const handleReserve = () => {
    // 这里可以添加预约逻辑
    console.log('执行预约操作');
  };

  return (
    <div>
      {/* 上部分：左图右信息 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 20,justifyContent: 'center' }}>
        <Col xs={24} sm={8}style={{ display: 'flex', justifyContent: 'center' }}>
          <img alt={book.title} src={book.cover} style={{ width: '100%', maxWidth: 300 }} />
        </Col>
        <Col xs={24} sm={16}>
          <Card
            actions={[
              <Button type="primary" onClick={handleBorrow} disabled={book.stock <= 0}>
                {book.stock > 0 ? '借阅' : '无库存'}
              </Button>,
              <Button onClick={handleReserve}>预约</Button>,
            ]}
            bordered={false} 
            // 添加左下阴影
            style={{ 
              boxShadow: '-5px 5px 10px rgba(0, 0, 0, 0.1)', 
              ...(book.stock <= 0 ? { opacity: 0.7 } : {}) 
            }}
          >
            <Card.Meta title={book.title} description="图书描述信息" />
            <div>
              <p>ISBN: {book.isbn}</p>
              <p>出版社: {book.publisher}</p>
              <p>页数: {book.pages}</p>
              <p>库存状态: {book.stock > 0 ? `有库存 (${book.stock} 本)` : '无库存'}</p>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 中间部分：书籍前一部分内容展示 */}
      <Card title="书籍节选" style={{ marginBottom: 20 }}>
        <p>{bookExcerpt}</p>
      </Card>

      {/* 下部分：相关书籍，调整大小 */}
      <Card title="相关推荐">
      <Row gutter={[16, 16]}>
          {relatedBooks.map((relatedBook) => (
            <Col key={relatedBook.id} xs={24} sm={12} md={8}>
              <Card
                hoverable
                // 修改 objectFit 属性为 contain 以实现等比例缩放
                cover={<img alt={relatedBook.title} src={relatedBook.cover} style={{ height: 150, objectFit: 'contain'}} />}
                size="small"
              >
                <Card.Meta title={relatedBook.title} />
              </Card>
            </Col>
          ))}
        </Row>
      </Card>
    </div>
  );
};

export default BookDetail;